<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Content</title>

    <!-- Bootstrap核心CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet">

    <link href="css/main.css" rel="stylesheet">

    <script src="js/plug/jquery.js"></script>
    <script src="js/plug/jquery.pin.js"></script>

    <script src="bootstrap/js/bootstrap.js"></script>

    <script src="js/content.js"></script>
    <script src="js/main.js"></script>
</head>

<body style="padding-top: 50px;" data-spy="scroll" data-target="#menu">
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation" id ="menu">
        <div class="navbar-header col-sm-offset-1">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu-collapse">
                <span class="sr-only">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Megend</a>
        </div>

         <div class="collapse navbar-collapse" id="navbar-menu-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Index</a></li>
                <li class="active"><a href="content.html">Content</a></li>
                <li><a href="search.html">Search</a></li>
                <li><a href="edit.html">Edit</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
           
        </div>

    </nav>


    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>Chochy，我的爱人！</p>
    </div>



    <div style="height: 5000px;" class="container" id ="index">


        <div class ="col-sm-4 col-md-3 col-sm-push-8  col-md-push-9" >
            <div id="div_left"> 
                <div class="input-group has-success">
                    <input type="text" class="form-control" id="inputWarning" placeholder ="搜索">
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="button">Go</button>
                    </span>
                </div>
                <br />

                <div class="panel panel-success hidden-xs">
                    <div class="panel-heading">标签</div>
                    <div class="panel-body pointer">
                        <span class="label label-default">原创</span>
                        <span class="label label-primary">IT</span>
                        <span class="label label-success">软件</span>
                        <span class="label label-info">分享</span>
                        <span class="label label-warning">技术</span>
                    </div>
                </div>


                <div class="panel panel-success pointer hidden-xs">
                    <div class="panel-heading">系统推荐</div>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">全部全部全部全部全部</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">全部全部全部全部全部全部全部全部全部</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">软件更新软件更新软件更新软件更新</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">技术文档技术文档技术文档技术文档技术文档技术文档技术文档技术文档</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">技术文档技术文档技术文档</a>
                </div>

                <div class="panel panel-success pointer hidden-xs">
                    <div class="panel-heading">阅读排行榜</div>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">全部全部全部全部全部</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">全部全部全部全部全部全部全部全部全部</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">软件更新软件更新软件更新软件更新</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">技术文档技术文档技术文档技术文档技术文档技术文档技术文档技术文档</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left" data-container="body" data-content="And here's some amazing content. It's very engaging. right?">技术文档技术文档技术文档</a>
                </div>
            </div>
        </div>




        <div class ="col-sm-8 col-md-9 col-sm-pull-4  col-md-pull-3">
            <h3 >List group item heading</h3>
            <p class="text-primary">List group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingitem headingList group item headingList group item headingList group item headingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item headingheadingList group item headingList group item heading</p>
            <hr>
            <button type="button" class="btn btn-success btn-xs" name="success_button">
                <span class="glyphicon glyphicon-thumbs-up"></span>有用
            </button>
            <button type="button" class="btn btn-warning btn-xs" name="warning_button">
                <span class="glyphicon glyphicon-thumbs-down"></span>没用
            </button>
            <p class="text-success text-right ellipsis-p">
                发表时间：<strong>2013/10/05 20:35</strong> 阅读次数：<strong>35</strong>次 回复次数：<strong>10</strong>次
            </p>


            <div class="well well-sm">

                <ul class="media-list">
                    <li class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" style="width: 64px; height: 64px;" alt="64x64" src="" data-src="holder.js/64x64">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                            <!-- Nested media object -->
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="media-object" style="width: 64px; height: 64px;" alt="64x64" src="" data-src="holder.js/64x64">
                                </a>
                                <div class="media-body">
                                    <h4 class="media-heading">Nested media heading</h4>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                    <!-- Nested media object -->
                                    <div class="media">
                                        <a class="pull-left" href="#">
                                            <img class="media-object" style="width: 64px; height: 64px;" alt="64x64" src="" data-src="holder.js/64x64">
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">Nested media heading</h4>
                                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Nested media object -->
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="media-object" style="width: 64px; height: 64px;" alt="64x64" src="" data-src="holder.js/64x64">
                                </a>
                                <div class="media-body">
                                    <h4 class="media-heading">Nested media heading</h4>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" style="width: 64px; height: 64px;" alt="64x64" src="" data-src="holder.js/64x64">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Media heading</h4>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                            <!-- Nested media object -->
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="media-object" style="width: 64px; height: 64px;" alt="64x64" src="" data-src="holder.js/64x64">
                                </a>
                                <div class="media-body">
                                    <h4 class="media-heading">Nested media heading</h4>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

                <ul class="pager">
                    <li class= "disabled"><a>Previous</a></li>
                    <li><a>Next</a></li>
                </ul>
            </div>


            <div class="panel panel-success">
                <div class="panel-heading">
                    <strong>评论：</strong>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal has-success" role="form">
                        <div class="form-group">
                            <label for="inputNickname" class="col-sm-2 col-md-2 col-xs-3 control-label">昵称：</label>
                            <div class="col-sm-6 col-md-6 col-xs-9">
                                <input type="text" class="form-control" id="inputNickname" placeholder="昵称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail" class="col-sm-2 col-md-2 col-xs-3 control-label">邮箱：</label>
                            <div class="col-sm-6 col-md-6 col-xs-9">
                                <input type="email" class="form-control" id="inputEmail" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputContent" class="col-sm-2 col-md-2 col-xs-3 control-label">内容：</label>
                            <div class="col-sm-6 col-md-6 col-xs-9">
                                <textarea class="form-control" rows="3" placeholder="内容" id="inputContent"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-12 col-xs-12">
                                <button type="button" class="btn btn-success">确认</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div  id="footer">

        <p class="text-center">设计&amp;开发 <a href="mailto:chohcy@foxmail.com">Chochy</a></p>
        <p class="text-center">&copy; 2013 By <a href="mailto:chohcy@foxmail.com">Chochy</a></p>

    </div>

    <a id="top" style="position: fixed;bottom: 150px;right: 8px; display: none;" class ="btn btn-success btn-xs" >TOP</a>
</body>
</html>
